import DesktopChip from './DesktopChip';
import ChipGroup from './ChipGroup';

import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import _, { forIn } from 'lodash';

import {
  date,
  debounce,
  dom,
  setCssVar,
  useQuasar,
  scroll,
} from '@teld/q-components';

import { useClipProps } from 't/bussiness/quick-filter/use-quick-filter';
export default defineComponent({
  props: {
    ...commonProps,
    ...useClipProps,
  },
  emits: ['filterChanged'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    function emitFilterChanged() {
      emit('filterChanged');
    }

    return () => {
      return (
        <>
          <ChipGroup
            {...props}
            showAllItem={false}
            onFilterChanged={emitFilterChanged}
          >
            {{ ...slots }}
          </ChipGroup>
        </>
      );
    };
  },
});
